<template>
	<view class="main-class">
		<tn-sticky>
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
				<!-- <view class="tn-color-black_text tn-flex justify-between tn-text-xl tn-pl-xl tn-pr-xl tn-pb-xl" >
					<tn-icon name="title" size="1"/>
					<span class="tn-white_text">密码修改</span>
					<tn-icon name="title" size="1" />
				</view> -->
				<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg"  text-color="tn-white" >提现信息 </tn-navbar>
				
			</view>
		</tn-sticky>
		
		<tn-form label-position="top" class="form-class tn-p">
			<view class="tn-flex-1 tn-pt ">
						<tn-title class="tn-w-1-3" title="提&nbsp&nbsp现&nbsp&nbsp人:" />
						<tn-input v-model="params.username" class="tn-w-2-3" />
			</view>	
			
		  <view class="tn-flex-1 tn-pt ">
			<tn-title class="tn-w-1-3" title="提现金额:" />
			<tn-input v-model="params.amount" class="tn-w-2-3" />
		  </view>
		  <view class="tn-flex-1 tn-pt ">
		  			<tn-title class="tn-w-1-3" title="开&nbsp&nbsp户&nbsp&nbsp行:" />
		  			<tn-input v-model="params.subbranch" class="tn-w-2-3" /> 
		  </view>	
		  
		  <view class="tn-flex-1 tn-pt ">
		  			<tn-title class="tn-w-1-3" title="开&nbsp&nbsp户&nbsp&nbsp名:" />
		  			<tn-input v-model="params.acctname" class="tn-w-2-3" /> 
		  </view>	
		  
		  <view class="tn-flex-1 tn-pt ">
		  			<tn-title class="tn-w-1-3" title="银行账号:" />
		  			<tn-input v-model="params.bankaccount" class="tn-w-2-3" /> 
		  </view>	

		  <tn-title class="tn-pt" title="提现备注:" />
		  
		  <view class="tn-pt">
		  	<tn-input
		  		v-model="params.remark"
		  		type="textarea"
		  		placeholder="请输入备注"
		  		height="180"
		  		:border = "true"
		  		confirm-type="done"
		  		:show-word-limit="true"
		  		:maxlength="200"
		  		 />
		  </view>
		   
		 
		  
		<!--  <tn-title class="tn-pt" title="打款凭证:" />
		  <view class="tn-pt">
			<tn-image-upload v-model="imageList" :action="actionUrl" :show-remove = "true" :multiple="false" @success="getImageList" :limit = "1" :form-data = "formData"
			 @remove = "deleteImage">
			</tn-image-upload>  
		  </view> -->
		   	
		</tn-form>
		
		<button class="button-class" @click="doSave"> 提 交 </button>
		
		<tn-popup v-model="showCalendarPopup" open-direction="top">
		  <view class="tn-pt">
		    <tn-calendar v-model="params.dates" min-date="2024-01-01" @change="closeCalendarPopup" />
		  </view> 
		  <view class="tn-mt tn-w-full tn-pb">
		    <tn-button
		      font-size="36"
		      custom-class="popup-calendar-button"
		      @click="closeCalendarPopup"
		    >
		      选择所选日期
		    </tn-button>
		  </view>
		</tn-popup>
		
	</view>
	
	
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'
	import { postCall,postDeleteImage} from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import md5 from "js-md5";
	import dayjs from "dayjs";
	import { createParams,generateUUID } from '@/utils/utils.js'
	const procName = "PROC_APP_DO_GETBACH";
	

	const params = reactive({
		dates:"",
		username:"",
		amount:"",
		remark:"",
		images:"",
		subbranch:"",
		acctname:"",
		bankaccount:""
	});
	
	
	const formData = {
		"url":""
	};
	
	
	const imageInfo = ref("");
	
	const imageList = reactive([]);
	const actionUrl = ref("");
	
	const showCalendarPopup = ref(false);
	
	const getImageList = (e) =>{
		imageList.length = 0;
		if(e.status==='done'){
			imageList.push(e.url);
			let imageUrl = e.url;
			imageInfo.value = imageUrl.replace(formData.url,"");
		}
	}
	
	const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
	
	const closeCalendarPopup = () => {
	  showCalendarPopup.value = false
	   Object.assign(params,{"dates":dayjs(params.dates).format('YYYY-MM-DD')});
	}
	
	const deleteImage = () =>{
		let fileName = imageInfo.value
		let parts = fileName.split("/");
		let param = {};
		param["directoryPath"] = parts[0];
		param["fileName"] = parts[1];
		postDeleteImage(param).then(res=>{
			imageList.length = 0;
			imageInfo.value = "";
		})
	}
	
	const doSave = () =>{
		Object.assign(params,{"images":imageList[0]});
		let data = {};
		data["P_ACTION"] = "SAVE";
		data["P_PROC_NAME"] = procName;
		postCall(Object.assign(data,createParams(params)) ).then(res=>{
			if(res){
				if(res.code === 200 ){
					uni.reLaunch({
					  url: '/pages/info/getcash' // 将这里替换为当前页面的路径
					})
				}
			}
		})
	}
	
	let loginInfo = {};
	 let userInfo = uni.getStorageSync('USERINFO') ;
	onMounted(()=>{
		loginInfo = uni.getStorageSync("LOGINUSER");

		Object.assign(params,{"username":userInfo.staffname});
		Object.assign(params,{"dates":dayjs().format('YYYY-MM-DD')});
		let http = uni.getStorageSync('HTTP');
		formData.url = http + "/static/";
		actionUrl.value = http + "/uploadImage";
		doGetLastInfo();
	})
	
	const doGetLastInfo = () =>{
		let data = {};
		data["P_ACTION"] = "GETLASTINFO";
		data["P_PROC_NAME"] = procName;
		postCall(Object.assign(data,createParams(params)) ).then(res=>{
			if(res){
				if(res.code === 200 ){
					if(res.data.DATASET.length>0){
						Object.assign(params,res.data.DATASET[0]);
					}
				}
			}
		})
	}
	
	let doModifyPwd = () =>{
		let params = {};
		params["P_ONEPWD"] = md5(userInfo.onepwd);
		params["P_TWOPWD"] = md5(userInfo.twopwd);
		params["P_ACTION"] = "MODIFY";
		params["P_PROC_NAME"] = procName;
		postCall(params).then(res=>{
			if(res){
				if(res.code === 200 ){
					loginInfo.passWord = userInfo.onepwd;
					uni.setStorageSync("LOGINUSER",loginInfo);
					toastMessage("修改成功！");
				}
			}
		})
	}

</script>

<style scoped>
.header-class{
	height: 17vh !important;
	flex-direction: column
}
.form-class{
	width: 90vw;
	margin-left: 5vw;
}
.button-class{
	margin-top: 5vh;
	width: 90vw;
	border-radius: 40px !important;
	/* color: #FFFFFF !important; */
	/* background: linear-gradient(to right,  #47e8be,#3379dc); */
	background: linear-gradient(to right,  var(--beginColor),var(--endColor));
	/* border: 0px solid rgba(0, 0, 0, 0.2) !important; */
}

.button-class::after{
	border: 0px solid rgba(0, 0, 0, 0.2) !important;
}
</style>
